<template>
	<view class="fui-wrap" v-if="detail">
		<fui-list bottomBorder title="停车券信息：">
			<fui-list-cell>
				<view class="title">商户：</view>
				<view class="content">
					{{detail.merch.merch_name}} - {{detail.merch.phone}}
				</view>
			</fui-list-cell>
			<fui-list-cell>
				<view class="title">停车券：</view>
				<view class="content">
					{{detail.coupon.title}}
				</view>
			</fui-list-cell>
			<fui-list-cell>
				<view class="title">简介：</view>
				<view class="content">
					{{detail.coupon.description || '无'}}
				</view>
			</fui-list-cell>
			<fui-list-cell>
				<view class="title">类型：</view>
				<view class="content">
					{{detail.coupon.coupon_type_txt}}
				</view>
			</fui-list-cell>
			<fui-list-cell>
				<view class="title">发券时间：</view>
				<view class="content">
					{{detail.createtime}}
				</view>
			</fui-list-cell>
			<fui-list-cell>
				<view class="title">到期时间：</view>
				<view class="content">
					{{formatDateTime(detail.expiretime)}}
				</view>
			</fui-list-cell>
			<fui-list-cell>
				<view class="title">状态：</view>
				<view class="content">
					<fui-tag :text="segmented[detail.status]" :type="status[detail.status]" theme="light"></fui-tag>		
				</view>
			</fui-list-cell>
		</fui-list>
		<fui-list bottomBorder title="车辆信息：">
			<fui-list-cell>
				<view class="title">车牌号：</view>
				<view class="content">
					<plateType :plate_number="detail.plate_number" :plate_type="detail.records.length>0?detail.records[0].plate_type:''"></plateType>
				</view>
			</fui-list-cell>
			<fui-list-cell>
				<view class="title">出入记录：</view>
				<view class="content">
					<block v-if="detail.records.length===0">
					<fui-text text="未入场" type="danger" size="24" block></fui-text>
					</block>
					<block v-if="detail.records.length>0">
					<view v-for="(item,index) in detail.records" style="margin-bottom: 10rpx;" :key="index">
						<fui-text :text="'入场：'+formatDateTime(detail.records[index].entry_time)" type="success" size="24" block></fui-text>
						<fui-text v-if="detail.records[index].exit_time" :text="'离场：'+formatDateTime(detail.records[index].exit_time)" type="success" size="24" block></fui-text>
					</view>
					</block>
				</view>
			</fui-list-cell>
			<fui-list-cell v-if="detail.records.length>0">
				<view class="title">减免费用：</view>
				<view class="content">
					{{countFee(detail.records)}}
				</view>
			</fui-list-cell>
		</fui-list>
		<view class="bottom">
			<fui-button @click="cancelCoupon" :disabled="disabled" v-if="detail.status===0 || detail.status===2">作废</fui-button>
		</view>
	</view>
</template>

<script>
	import {methods} from '@/utils/core.js';
	import {formatDateTime} from '@/utils/util.js';
	import plateType from '@/components/common/platetype.vue';
	export default {
		components:{
			plateType:plateType
		},
		data() {
			return {
				segmented:['未使用','已使用','使用中','已过期','已作废'],
				status:['success','warning','primary','danger','danger'],
				detail:'',
				disabled:false,
				fabs:[
					{
						name: 'search',
						text: '搜索'
					}
				]
			}
		},
		onLoad(e) {
			this.getCouponDetail(e.id);
		},
		methods: {
			...methods,
			getCouponDetail:function(id){
				this.$get('parking/merch/coupon-detail',{
					id:id
				},true).then(res=>{
					this.detail=res;
				});
			},
			formatDateTime:function(e){
				let r=formatDateTime(new Date(e*1000));
				return r.slice(0,16);
			},
			countFee:function(records){
				let fee=0;
				for(let i=0;i<records.length;i++){
					fee+=parseFloat(records[i].activities_fee);
				}
				return '￥'+fee;
			},
			cancelCoupon:function(){
				uni.showModal({
					title:'您确定要将这张停车券作废吗？',
					success: (e) => {
						if(e.confirm){
							this.disabled=true;
							this.$post('parking/merch/coupon-trush',{id:this.detail.id},true,true).then(res=>{
								uni.setStorageSync('refresh',1);
								this.$navigateBack(1500);
							});
						}
					}
				});
			},
			search:function(){
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fui-wrap{
		padding-top: 0rpx;
		.status{
			padding-top: 30rpx;
			text-align: center;
		}
		.bottom{
			margin-top: 30rpx;
			padding: 0 24rpx;
		}
	}
</style>